
<template>
  <!-- <div>
    <h1>专区管理</h1>
  </div> -->

  <div id="lbgl">
    <div id="sxcx">
      <div class="sxcx_header clear">
        <div><span>筛</span>选查询
          <span @click="isClose">{{closeText}}<i :class="upOrDown"></i></span>
        </div>
      </div>
      <div class="sxcx_body clear" id="closeBody">
        <div class="sxcx_kuang">
          <label for="">关键词</label>
          <input placeholder="请输入内容" class="sxcx_input" v-model="searchFrom.title">
        </div>
        <div class="sxcx_kuang">
          <label for="">状态</label>
          <el-select v-model="searchFrom.shelf" placeholder="全部" class="sxcx_state">
            <el-option v-for="(item,i) in options" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="block sxcx_kuang ">
          <span class="demonstration">创建时间</span>
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="searchFrom.shelfTime" type="datetime" placeholder="请选择时间" class="sxcx_shangjia">
          </el-date-picker>
        </div>

      </div>
      <div>
        <div class="sxcx_btn">
          <button @click="czSpecial">重置</button>
          <button @click="sxSpecial">筛选</button>
        </div>
      </div>
      <!-- 弹框1 -->
      <div class="tjlb">
        <div class="sxcx_tjlb">
          <el-dialog title="添加专区" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="专区名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>

              <el-form-item label="位置" prop="address" required>
                <el-input v-model="ruleForm.address" style="width:60px"></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="model" required>
                <el-select v-model="ruleForm.model" placeholder="请选择类型">
                  <el-option label="单排式" value="单排式"></el-option>
                  <el-option label="单列式" value="单列式"></el-option>
                  <el-option label="双排单列式" value="双排单列式"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上架时间段" prop="shelfTime">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.shelfTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>

              <el-form-item label="上架时间" prop="time">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.time" type="datetime" placeholder="选择日期时间">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="上架" prop="shelf">
                <el-switch v-model="ruleForm.shelf"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <!-- 弹框2-->
      <div class="tjlb">
        <div class="sxcx_tjlb">
          <el-dialog title="编辑专区" :visible.sync="dialogVisible2" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="专区名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>

              <el-form-item label="位置" prop="address" required>
                <el-input v-model="ruleForm.address" style="width:60px"></el-input>
              </el-form-item>

              <el-form-item label="类型" prop="model" required>
                <el-select v-model="ruleForm.model" placeholder="请选择类型">
                  <el-option label="单排式" value="单排式"></el-option>
                  <el-option label="单列式" value="单列式"></el-option>
                  <el-option label="双排单列式" value="双排单列式"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上架时间段" prop="shelfTime">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.shelfTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>

              <el-form-item label="上架时间" prop="time">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.time" type="datetime" placeholder="选择日期时间">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="上架" prop="shelf">
                <el-switch v-model="ruleForm.shelf"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="editSure">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
    </div>
    <div id="sjlb">
      <div class="clear">
        <span>数据列表</span>
      </div>
      <div>
        <label for="">排序方式</label>
        <select name="paixu" id="sjlb_paixu">
          <option value="0">排序方式</option>
          <option value="1">顺序</option>
          <option value="2">逆序</option>
        </select>
        <label for="">批量操作</label>
        <select name="piliang" id="sjlb_piliang">
          <option value="1">禁用</option>
          <option value="2">未禁用</option>
        </select>
        <el-button class="sjlb_btn" type="button" @click="dialogVisible = true">添加</el-button>
      </div>
      <div class="sjlb_table">
        <el-table :data="sjlbData" border style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="id" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="title" label="专区名称" width="110">
          </el-table-column>
          <el-table-column prop="model" label="显示模板" width="150">
          </el-table-column>
          <el-table-column prop="address" label="位置" width="60">
          </el-table-column>
          <el-table-column prop="shelf" label="是否上架" width="120">
            <template slot-scope="scope">
              <el-switch active-color="#409EFF" inactive-color="#C0CCDA" v-model="scope.row.shelf" @change="specialShelf(scope.row)"></el-switch>
            </template>
            <!-- :active-value="1" 
               :inactive-value="0"  -->
          </el-table-column>
          <el-table-column prop="shelfTime" label="上架时间段" width="210">
          </el-table-column>
          <el-table-column prop="time" label="上架时间" width="180">
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <div slot-scope="scope">
              <el-button type="text" size="small">商品管理</el-button>
              <el-button type="text" size="small" @click="editData(scope.row)">编辑</el-button>
              <div>
                <el-button type="text" size="small">生成链接</el-button>
                <el-button @click="delSure(scope.row)" type="text" size="small">删除</el-button>
              </div>

            </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="sjlb_page">
        <!-- .sync用于当点击页时，nowPage变为点击页-->
        <el-pagination :current-page.sync="nowPage" :page-size="nowNum" layout=" prev, pager, next" :total="lbglData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import date from '../../components/package'//引入时间格式文件
export default {
  data() {
    return {
      lbglData: [],
      input1: '',
      value1: '',
      value: '',
      nowPage: 1,
      nowNum: 5,
      options: [{
        value: '全部',
        label: '',
      },
      {
        value: '上架',
        label: '',
      },
      {
        value: '下架',
        label: '',
      }],
      searchFrom: {
        title: '',
        shelf: '全部',
        shelfTime: ''
      },
      closeText: '收起',
      upOrDown: 'el-icon-arrow-up',
      dialogVisible: false,//关闭弹框
      dialogVisible2: false,//关闭弹框2
      ruleForm: {
        title: '',
        address: '',
        shelfTime: '',
        time: '',//欲上架时间
        model: '',
        shelf: false,
      },
      rules: {
        title: [
          { required: true, message: '请输入轮播名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        img: [
          { required: true, message: '(请注意图片尺寸)', trigger: 'change' }
        ],
        address: [
          {
            required: true, message: '请填写位置', trigger: 'blur'
          }
        ],
        // date1: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        // date2: [
        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        // ],
        // time: [
        //   { type: 'date', message: '请选择时间', trigger: 'change' }
        // ],
        genre: [
          { type: 'array', required: true, message: '请至少选择一个类型', trigger: 'change' }
        ],

      },

    }
  },
  // 计算页码数
  computed: {
    sjlbData() {
      // console.log(this.lbglData);
      return this.lbglData.slice((this.nowPage - 1) * this.nowNum, this.nowPage * this.nowNum);
    }
  },
  mounted() {
    this.getallLbgl();
  },
  methods: {
    //筛选
    sxSpecial() {
      let from = { ...this.searchFrom };
      if (from.shelf == '上架') {
        from.shelf = '是';
      } else if (from.shelf == '下架') {
        from.shelf = '否'
      }
      this.getallLbgl(from);
      // console.log(this.searchFrom)
      // console.log(from)
      //

    },
    //重置
    czSpecial() {
      this.searchFrom = {
        title: '',
        shelf: '全部',
        shelfTime: ''
      }
      this.getallLbgl();
    },

    //编辑传数据
    editData(data) {
      this.dialogVisible2 = true;
      this.ruleForm = { ...data };
      // console.log(this.ruleForm)
    },
    // 确认编辑
    editSure(res) {
      this.ruleForm.shelfTime = this.ruleForm.shelfTime[0] + '~' + this.ruleForm.shelfTime[1];
      this.$axios({
        url: '/oparate/editSpecial',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.dialogVisible2 = false;
        this.getallLbgl(this.searchFrom);
        this.ruleForm = {
          title: '',
          address: '',
          shelfTime: '',
          time: '',//欲上架时间
          model: '',
          shelf: false,
        }
        // this.getallLbgl();
      })
    },
    // 收起
    isClose() {
      let a = document.getElementById('closeBody');
      if (a.style.display == 'none') {
        a.style.display = 'block';
        this.closeText = '收起';
        this.upOrDown = 'el-icon-arrow-up';
      } else {
        a.style.display = 'none';
        this.closeText = '展开';
        this.upOrDown = 'el-icon-arrow-down';
      }
    },

    // 刷新所有数据
    getallLbgl(data = {}) {
      this.$axios({
        url: '/operate/getallarea',
        method: 'get',
        params: data
      }).then((res) => {
        var res = [...res.data.data];
        // console.log(res, 'res')
        res.map((v) => {
          v.time = date.dateFn(v.time);
          if (v.shelf == '是') {
            v.shelf = true;
          } else {
            v.shelf = false;
          }
          return v
        });
        this.lbglData = res;

      })

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.ruleForm = {
            title: '',
            address: '',
            shelfTime: '',
            time: '',//欲上架时间
            model: '',
            shelf: false,
          }
        })
        .catch(_ => { });
    },

    //添加
    submitForm(formName) {

      this.$ref['ruleForm'].resetFields();

      if (this.ruleForm.shelf) {
        this.ruleForm.shelf = '是'
      } else {
        this.ruleForm.shelf = '否';
      }
      this.ruleForm.shelfTime = this.ruleForm.shelfTime[0] + '~' + this.ruleForm.shelfTime[1];
      this.$axios({
        url: '/operate/addSpecial',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {
        this.dialogVisible = false;
        this.ruleForm = {
          title: '',
          address: '',
          shelfTime: '',
          time: '',//欲上架时间
          model: '',
          shelf: false,
        }
        this.getallLbgl();

      })
    },
    labelPosition() {
      console.log(this.getallLbgl());
    },
    // 删除弹出信息
    delSure(data) {
      this.$confirm('确认删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    // 删除数据的方法
    del(data) {
      this.$axios({
        url: '/oprate/delSpecial',
        method: 'post',
        data: data
      }).then(() => {
        this.getallLbgl();
      })
    },
    // 是否上架
    specialShelf(val) {
      //val与scope.row类似，代表点击的这一行数据这一行
      if (val.shelf) {
        val.shelf = '是'
      } else {
        val.shelf = '否'
      }
      // 调用数据
      this.$axios({
        url: '/operate/specialShelf',
        method: 'post',
        data: val
      }).then(() => {
        if (val.shelf == '是') {
          this.$message({
            message: '商品上架',
            type: 'success'
          });
        } else {
          this.$message({
            message: '商品下架成功',
            type: 'warning'
          });
        }
        this.getallLbgl();
      })


    }

  }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
clear::after {
  content: "";
  display: none;
  clear: both;
}
#lbgl {
  font-size: 12px;
  color: rgb(51, 51, 51);
}
.sxcx_header {
  background-color: rgb(242, 242, 242);
  color: rgb(102, 102, 102);
  font-size: 14px;
  line-height: 40px;
  padding-left: 15px;
}
.sxcx_header > div > span:first-child {
  font-size: 16px;
  float: left;
}
.sxcx_header > div > span:last-child {
  color: rgb(51, 51, 51);
  float: right;
  padding-right: 30px;
}
.sxcx_body {
  margin-top: 20px;
  margin-bottom: 60px;
}
.sxcx_body .sxcx_kuang {
  padding-right: 15px;
  float: left;
  margin-right: 80px;
}

.sxcx_body input {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 40px;
  width: 200px;
  padding: 0 30px;
  /* color: #dcdfe6; */
  margin-left: 10px;
  font-size: 12px;
}
.sxcx_body .sxcx_shangjia,
.sxcx_body .sxcx_state {
  color: #dcdfe6;
  margin-left: 10px;
  font-size: 12px;
}
.sxcx_btn button {
  margin-top: 40px;
  color: rgb(255, 255, 255);
  width: 100px;
  line-height: 35px;
  background-color: rgb(102, 102, 102);
  border: none;
  border-radius: 4px;
}
.sxcx_btn button:first-child {
  margin-right: 30px;
  background-color: rgb(204, 204, 204);
}
#sjlb {
  background-color: rgb(242, 242, 242);
  padding: 0 15px 30px 15px;
  color: black;
  padding-left: 15px;
}
#sjlb div:first-child {
  font-size: 14px;
  color: rgb(102, 102, 102);
  line-height: 40px;
  margin-bottom: 15px;
}
#sjlb div:first-child span {
  float: left;
}
#sjlb div:nth-child(2) {
  float: right;
  padding: 10px 0 10px 0;
  /* line-height: 40px; */
}
#sjlb div:nth-child(2) select {
  color: #dcdfe6;
  border: 1px solid #dcdfe6;
  width: 90px;
  margin-right: 20px;
}
#sjlb div:nth-child(2) select,
#sjlb div:nth-child(2) .sjlb_btn {
  height: 25px;
}
#sjlb div:nth-child(2) .sjlb_btn {
  width: 60px;
}
#sjlb div:nth-child(2) label {
  margin-right: 5px;
}
/* 表格文字居中对齐 */
#sjlb .sjlb_table /deep/.el-table th > .cell {
  text-align: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
}

#sjlb .sjlb_table /deep/.el-table .cell {
  text-align: center;
  font-size: 12px;
  color: rgb(102, 102, 102);
}
#sjlb .sjlb_page {
  margin-top: 30px;
  text-align: center;
}
.el-form /deep/ .el-form-item {
  margin: 40px;
}
.el-form .el-form-item /deep/ .el-col {
  margin-top: -40px;
}
.el-form .el-form-item /deep/ .el-col:first-child {
  margin-left: -40px;
}
.el-dialog__body /deep/.el-from {
  text-align: center;
}
.el-form-item__content .el-button {
  width: 80px;
  line-height: 40px;
}
</style>

